<template>
  <div>
    <el-dialog
      title="举报"
      :visible.sync="reportVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-select v-model="value" sizi="mini" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.title"
          :value="item.title"
        >
        </el-option>
      </el-select>
      <p>举报说明:</p>
      <el-input
        :autosize="{ minRows: 5 }"
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="textarea"
      >
      </el-input>

      <span slot="footer" class="dialog-footer">
        <el-button @click="reportVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitReport">提交</el-button>
      </span>
    </el-dialog>
    <i @click="toReport()" class="el-icon-warning waring">举报</i>
  </div>
</template>

<script>
import { reactive, ref } from "@vue/composition-api";
import { Message } from "element-ui";
import { getReportList } from "@/network/report";
function reportBase(msg) {
  const reportVisible = ref(false);
  const value = ref("选择举报类型");
  const textarea = ref("");
  const options = ref([]);
  let report={
    bid:0,
    content:'',
    rkid:0,
    rtype:'动态',
    type:'student',
    uid:0
  }

  const getReportKind = () => {
    getReportList().then((res) => options.value=res.data.extend.reportKinds);
  };
  const toReport = () => {
    reportVisible.value = true;
    getReportKind();
  };
  const closeReport = () => (reportVisible.value = false);
  const submitReport = () => {
    
    Message.success("成功");
    closeReport();
    console.log(msg);
  };
  function handleClose(done) {
    this.$confirm("确认关闭？")
      .then((_) => {
        done();
      })
      .catch((_) => {});
  }
  return {
    reportVisible,
    toReport,
    handleClose,
    close,
    options,
    value,
    textarea,
    submitReport,
  };
}
export default {
  props: ["msg"], //拿到跳转举报处的内容和作者
  setup(props, context) {
    return {
      ...reportBase(props.msg),
    };
  },

  //不是吧
};
</script>

<style scoped>
.waring {
  color: rgb(116, 116, 116);
  cursor: pointer;
  font-size: 14px;
}
.waring:hover {
  color: rgb(156, 165, 156);
}
</style>